<template>
  <div class="wrap">
    <img src="../../static/img/header-logo.jpg"
         alt="header-logo.jpg">
    <img src="../../static/img/school-picture.jpg"
         alt="school-picture.jpg">
    <div class="stu-reg">
      <p id="title">管理员登录系统</p>
      <group>
        <x-input text-align="center"
                 placeholder="请输入账号"
                 :show-clear="false"
                 style="border: 1px solid #aaa; border-radius: 2px;"
                 v-model="acct">
          <icon slot="right"
                :type="isShowIcon_account"
                @click.native="showIcon('acct')"></icon>
        </x-input>
      </group>
      <group>
        <x-input type="password"
                 text-align="center"
                 placeholder="请输入密码"
                 :show-clear="false"
                 style="border: 1px solid #aaa; border-radius: 2px; margin-bottom:1.2em"
                 v-model="pswd">
          <icon slot="right"
                :type="isShowIcon_password"
                @click.native="showIcon('pswd')"></icon>
        </x-input>
      </group>
      <x-button type="primary"
                @click.native="submit"
                id="reg-but">登录</x-button>
    </div>
    <div class="join">
      <p>三月软件，IT时代的大学生精英团队，竭诚为您服务！</p>
      <grid>
        <grid-item label="三月软件公众号"
                   class="chat-img">
          <img slot="icon"
               src="../../static/img/wx-code.png"
               alt="weChat">
        </grid-item>
      </grid>
      <p style="font-size:11px; color:#F00;">
        如需帮助： 1.请到三月软件服务台咨询<br>
        地址:地球仪北侧<br>
        2.请联系三月软件服务人员:郝庆会:18838060418
      </p>
      <p style="font-size:11px; padding: 15px 0;">技术支持&copy;三月软件小组</p>
      <toast v-model="showmsg"
             type="warn">{{msg}}</toast>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      acct: "",
      pswd: "",
      showmsg: false,
      msg: "",
      isShowIcon_account: "",
      isShowIcon_password: ""
    };
  },
  watch: {
    acct(newValue) {
      this.isShowIcon_account = newValue == "" ? "" : "clear";
    },
    pswd(newValue) {
      this.isShowIcon_password = newValue == "" ? "" : "clear";
    }
  },
  methods: {
    submit() {
      let _this = this;
      let params = new URLSearchParams();
      params.append("account", _this.acct);
      params.append("password", _this.pswd);
      this.axios({
        method: "post",
        url: "/Login",
        params
      })
        .then(function(resp) {
          if (resp.data.code == 0) {
            //成功
            _this.$vux.loading.show({
              text: "Loading"
            });
            setTimeout(() => {
              _this.$vux.loading.hide();
            }, 300);
            if (resp.data.result.status == 0) {
              //普通管理员查看
              if (resp.data.result.type.slice(-2) == "学院") {
                localStorage.setItem("academy", resp.data.result.type);
                _this.$router.push("/instructor/majorInfo");
              } else {
                _this.$router.push("/admin/reportChart");
              }
              window.localStorage.setItem(
                "user",
                JSON.stringify(resp.data.result)
              );
            } else if (resp.data.result.status == 1) {
              //跳转到复位
              _this.$router.push("/reset");
            } else if (resp.data.result.status == 2) {
              _this.$router.push("/instructor/confirmRegt");
            }
          } else if (resp.data.code == 1) {
            //失败
            _this.msg = resp.data.msg;
            _this.showmsg = true;
          }
        })
        .catch(function(error) {
          _this.msg = error;
        });
    },
    // 点击清空输入框
    showIcon(value) {
      if (value === "acct") {
        this.acct = "";
      } else {
        this.pswd = "";
      }
    }
  }
};
</script>

<style scoped>
/*当屏幕尺寸小于670px时，应用下面的CSS样式*/
@media screen and (max-height: 670px) {
  .wrap {
    background: linear-gradient(#fff, #afd0e4);
  }
}
img {
  width: 100%;
  display: block;
}
.stu-reg {
  width: 75%;
  height: 230px;
  padding: 20px;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  margin-top: -27%;
  background-color: #fff;
  box-shadow: #ccc 5px 5px 70px 0;
}
#title {
  font-size: 20px;
  text-align: center;
  color: rgb(0, 160, 233);
  letter-spacing: 3px;
}
x-input {
  border: 1px solid #ddd;
  border-radius: 2px;
  margin-bottom: 10px;
}
#reg-but {
  background-color: rgb(0, 160, 233);
}
.join {
  margin-top: 30px;
}
.join p {
  text-align: center;
  font-size: 15px;
}
.chat-img /deep/ .weui-grid__icon {
  width: 80px;
  height: 80px;
}
.chat-img /deep/ .weui-grid__label {
  color: #333;
  font-size: 11px;
}
</style>
